<!DOCTYPE html>
<html lang="en">
<head>
    <title>Scratch Link Test Client Fun Stuff Yay</title>
    <style>
        button, input {
            margin: 0.125rem auto;
        }
    </style>
</head>
<body>
    <div><label for="log">Log</label></div>
    <textarea id="log" title="log" readonly style="width: 40rem; height: 10rem;"></textarea>
    <div>
        <input id="follow" type="checkbox" title="Follow" checked>
        <label for="follow">Follow</label>
    </div>
    <fieldset>
        <legend>Host</legend>
        <div>
            <input id="linkSecure" type="checkbox" title="WSS" />
            <label for="linkSecure">WSS?</label>
            <input id="linkHost" value="127.0.0.1" type="text" placeholder="Scratch Link host" style="width: 30rem;" />
        </div>
    </fieldset>
    <fieldset>
        <legend>BLE</legend>
        <div>
            <button id="initBLE">Connect to app</button>
            <button id="getVersionBLE">Get Version</button>
            <button id="pingBLE">Request ping</button>
        </div>
        <div>
            <button id="discoverBLE">Discover peripherals</button>
            <button id="connectBLE">Connect to discovered peripheral</button>
            <button id="getServicesBLE">Get services of connected peripheral</button>
        </div>
        <fieldset>
            <legend>Stress Test</legend>
            <button id="stressBLE">Go</button>
            <input id="stressPingBLE" type="checkbox" title="Ping?" />
            <label for="stressPingBLE">Ping?</label>
            <input id="stressGetVersionBLE" type="checkbox" title="Get version?" />
            <label for="stressGetVersionBLE">Get version?</label>
            <input id="stressDiscoverBLE" type="checkbox" title="Discover?" />
            <label for="stressDiscoverBLE">Discover?</label>
            <input id="stressConnectBLE" type="checkbox" title="Connect?" />
            <label for="stressConnectBLE">Connect?</label>
        </fieldset>
        <fieldset>
            <legend>Optional Services</legend>
            <textarea id="optionalServicesBLE" placeholder="Optional services, if any, separated by whitespace" style="width:20rem;height:3rem;"></textarea>
        </fieldset>
        <div id="filtersBLE">
            <button id="addFilterBLE">Add a filter</button>
            Discovery filters:
        </div>
        <fieldset>
            <legend>micro:bit</legend>
            <button id="setServiceMicroBit">Set service ID</button>
            <button id="readMicroBit">Read and monitor data</button>
            <button id="writeMicroBit">Change the LEDs</button>
        </fieldset>
        <fieldset>
            <legend>WeDo 2.0</legend>
            <button id="setServiceWeDo2">Set service ID</button>
        </fieldset>
        <fieldset>
            <legend>GDX-FOR</legend>
            <button id="setGDXFOR">Set discovery parameters</button>
        </fieldset>
    </fieldset>
    <fieldset>
        <legend>BT / EV3</legend>
        <div>
            <button id="initBT">Connect to app (BT)</button>
            <button id="getVersionBT">Get Version</button>
            <button id="discoverBT">Find BT devices</button>
            <button id="closeBT">Goodbye</button>
        </div>
        <fieldset>
            <legend>Stress Test</legend>
            <button id="stressBT">Go</button>
            <input id="stressPingBT" type="checkbox" title="Ping?" />
            <label for="stressPingBT">Ping?</label>
            <input id="stressGetVersionBT" type="checkbox" title="Get version?" />
            <label for="stressGetVersionBT">Get version?</label>
            <input id="stressDiscoverBT" type="checkbox" title="Discover?" />
            <label for="stressDiscoverBT">Discover?</label>
            <input id="stressConnectBT" type="checkbox" title="Connect?" />
            <label for="stressConnectBT">Connect?</label>
        </fieldset>
        <div>
            <input id="peripheralId" value="0016533d0504" type="text" placeholder="Peripheral id">
            <button id="connectBT">Make friends</button>
        </div>
        <div>
            <input id="messageBody" style="width:20em;" value="DQAAAAAEAJkdAAAAAgFg" type="text" placeholder="data">
            <button id="send">Converse!</button>
            <button id="beep">Yell</button>
        </div>
    </fieldset>
    <script>
        self.module = { exports: {} }; // Hack to allow `module.exports` in the scripts from scratch-vm
        self.Scratch = self.Scratch || {}; // Container for semi-global objects in this playground
    </script>
    <!-- Non-Safari WebSocket support, borrowed from scratch-vm -->
    <script src="./node_modules/scratch-vm/src/util/jsonrpc.js"></script>
    <script src="./node_modules/scratch-vm/src/util/scratch-link-websocket.js"></script>
    <!-- Safari WebExtension support: this script is injected by the Safari extension if it's active -->
    <script id="scratch-link-extension-script"></script>
    <!-- Playground-specific code -->
    <script src="./playground.js"></script>
</body>
</html>
